const logout = document.querySelector('#logout');//退出

judgeLogin()//判断是否登录
renderUser()//渲染登录成功后的用户名
getDashboard()//获取统计数据


//渲染登录成功后的用户名
function renderUser() {
    document.querySelector('.username').innerText = localStorage.getItem('username')
}

//获取统计数据
async function getDashboard() {
    //项目中 token 传递过去 几乎全部都是放在 请求头中!!
    // 请求头 数据类型看 仅仅是一个对象 支持传递 key value 类型数据
    // key 和 value 都看文档! !
    const result = await axios({
        url: '/dashboard',
        // 请求头
        // headers: {
        //     Authorization: localStorage.getItem('token')
        // }
    })
    console.log(result);
    const { overview, year, salaryData, groupData, provinceData } = result.data//解构拿到overview对象的数据
    renderOverview(overview)//调用渲染函数
    renderYear(year)//渲染学科薪资走势折线图
    renderSalary(salaryData)//渲染班级薪资饼图
    renderGroupData(groupData)//薪资数状图
    renderSalaryPie(salaryData)//渲染男女薪资饼图
    renderMap(provinceData)//渲染籍贯地图
}

//渲染面板数据
function renderOverview(overview) {
    //对象数据用forin循环遍历很方便
    for (const key in overview) {
        document.querySelector(`.${key}`).innerHTML = overview[key]
    }
}

//退出功能
logout.addEventListener('click', function (e) {
    localStorage.removeItem('token')
    location.href = 'login.html'
})

//渲染学科薪资走势
function renderYear(year) {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector("#line"));
    // 指定图表的配置项和数据
    const option = {
        title: {
            text: '2021全学科薪资走势',
            left: 20,
            top: 10
        },
        xAxis: {
            type: 'category',
            data: year.map(v => v.month),
            axisLine: {
                lineStyle: {
                    type: 'dashed',
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: 'rgb(81, 211, 255)'
                }
            }
        },

        series: [
            {
                data: year.map(v => v.salary),
                type: 'line',
                smooth: true,
                symbolSize: 10,
                lineStyle: {
                    color: 'rgb(95, 142, 255)',
                    width: 9
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(200, 240, 255,1)'
                        },
                        {
                            offset: 0.8,
                            color: '#fff'
                        }
                    ])
                }
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

// 渲染班级薪资饼图
function renderSalary(salaryData) {

    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector("#salary"));
    const option = {
        title: {
            text: '班级薪资分布',
            left: 15,
            top: 15
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: salaryData.map(v => ({ value: v.g_count + v.b_count, name: v.label }))
            }
        ],
        color: ['rgb(253, 162, 36)', 'rgb(80, 151, 255)', 'rgb(63, 206, 255)', 'rgb(52, 211, 154)']
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}

//渲染薪资数状图
function renderGroupData(groupData) {
    const myChart = echarts.init(document.querySelector("#lines"));
    option = {

        tooltip: {
            trigger: 'axis'
        },

        xAxis: [
            {
                type: 'category',
                // prettier-ignore
                data: groupData['1'].map(v => v.name)
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '期望薪资',
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgb(53, 210, 155)' },
                        { offset: 1, color: 'rgb(209, 244, 232)' }
                    ])
                },
                data: groupData['1'].map(v => v.hope_salary),
            },
            {
                name: '实际薪资',
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgb(74, 159, 237)' },
                        { offset: 1, color: 'rgb(213, 233, 251)' }
                    ])
                },
                data: groupData['1'].map(v => v.salary),
            }
        ]
    };
    myChart.setOption(option);

    //点击列表按钮
    document.querySelector('#btns').addEventListener('click', function (e) {
        if (e.target.classList.contains('btn')) {
            const key = e.target.innerText
            // console.log(key);
            //删除高亮
            document.querySelector('#btns button.btn-blue').classList.remove('btn-blue')
            //添加高亮
            e.target.classList.add('btn-blue')

            //改变的数据才要重新替换，echarts的写法
            myChart.setOption({
                xAxis: [
                    {
                        data: groupData[key].map(v => v.name)
                    }
                ],
                series: [
                    {
                        data: groupData[key].map(v => v.hope_salary),
                    },
                    {
                        data: groupData[key].map(v => v.salary),
                    }
                ]
            });
        }


    })
}

//渲染男女薪资饼图
function renderSalaryPie(salaryData) {
    const myChart = echarts.init(document.querySelector("#gender"));

    const datas = [salaryData.map(v => ({ name: v.label, value: v.b_count })),
    salaryData.map(v => ({ name: v.label, value: v.g_count }))]

    option = {
        title: [{
            text: '男女薪资分布',
            left: 15,
            top: 15
        }, {
            text: '男生',
            left: 'center',
            top: '45%'
        }, {
            text: '女生',
            left: 'center',
            top: '90%'
        }],
        color: ['rgb(253, 162, 36)', 'rgb(80, 151, 255)', 'rgb(63, 206, 255)', 'rgb(52, 211, 154)'],
        series: datas.map(function (data, idx) {
            var top = idx * 45 + 12;
            return {
                type: 'pie',
                radius: [40, 60],
                top: top + '%',
                height: '33.33%',
                left: 'center',
                width: 400,
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                data: data
            };
        })
    };
    myChart.setOption(option);
}


//渲染籍贯地图
function renderMap(provinceData) {
    const myChart = echarts.init(document.querySelector('#map'));
    const fakeData = [{ name: '南海诸岛', value: 0 }, {
        name: '北京',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '天津',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '上海',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '重庆',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '河北',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '河南',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '云南',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '辽宁',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '黑龙江',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '湖南',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '安徽',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '山东',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '新疆',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '江苏',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '浙江',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '江西',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '湖北',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '广西',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '甘肃',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '山西',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '内蒙古',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '陕西',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '吉林',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '福建',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '贵州',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '广东',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '青海',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '西藏',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '四川',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '宁夏',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '海南',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '台湾',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '香港',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    {
        name: '澳门',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
    },
    ]
    const trueData = []
    fakeData.forEach((item1) => {
        const index = provinceData.findIndex(item2 => item2.name.includes(item1.name))
        if (index === -1) {
            trueData.push({ name: item1.name, value: 0, tipData: 0 })
        } else {
            //老师的写法
            // provinceData[index].tipData = provinceData[index].value
            // provinceData[index].name = item1.name;
            // trueData.push(provinceData[index]);

            //构造数组添加到新数组中去
            trueData.push({ name: item1.name, value: provinceData[index].value, tipData: provinceData[index].value })
        }
    })

    const option = {
        title: {
            text: '籍贯分布',
            top: 20,
            left: 20
        },

        visualMap: {
            min: 0,
            max: 6,
            left: 50,
            bottom: 20,
            text: ['6', '0'],
            calculable: false,
            orient: 'vertical',
            inRange: {
                color: ['#e0ffff', '#006edd'],
                symbolSize: [100, 100]
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        series: [{
            name: '接入医院数量',
            type: 'map',
            mapType: 'china',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    }
                },
                emphasis: {
                    label: {
                        show: true
                    }
                }
            },
            label: {
                normal: { //静态的时候展示样式
                    show: true, //是否显示地图省份得名称
                    textStyle: {
                        color: "#fff",
                        fontSize: 12
                    }
                },
                emphasis: { //动态展示的样式
                    color: '#fff',
                },
            },
            data: trueData
        },]

    }
    myChart.setOption(option);
}